<template>
  <div class="orders-com">
    <div class="orders-top">
      <div class="ordersInput">
        <span>订单编号 :</span>
        <el-input
          v-model="input"
          placeholder="请输入内容"
          clearable
        />
      </div>
      <div class="ordersDate">
        <span>选择日期 :</span>
        <el-date-picker
          v-model="value1"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </div>
      <el-button type="primary" icon="el-icon-search" size="medium">查询</el-button>
    </div>

    <!-- 表单 -->
    <div class="orders-main">
      <el-table
        :header-cell-style="{background:'#f3f6fb'}"
        class="customer-table"
        :data="tableData"
        style="width: 100%"
        highlight-current-row
      >
        <el-table-column
          prop="date"
          label="序号"
          width="80"
        />
        <el-table-column
          prop="name"
          label="订单编号"
        />
        <el-table-column
          prop="province"
          label="商品名称"
        />
        <el-table-column
          prop="city"
          label="订单金额(元)"
        />
        <el-table-column
          prop="address"
          label="设备编号"
        />
        <el-table-column
          prop="zip"
          label="订单状态"
        />
        <el-table-column
          prop="zip"
          label="订单日期"
        />
        <el-table-column
          prop="zip"
          label="工单状态"
        />
        <el-table-column
          label="操作"
          width="100"
        >
          <template slot-scope="scope">
            <el-button type="text" size="medium" @click="handleClick(scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <OrdersAdd v-model="OrdersFalg" />
  </div>
</template>
<script>
import OrdersAdd from './components/OrdersAdd.vue'
export default {
  name: 'Orders',
  components: {
    OrdersAdd
  },
  data() {
    return {
      value1: '',
      input: '',
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }],
      OrdersFalg: false
    }
  },
  created() {
  },
  methods: {

    handleClick() {
      this.OrdersFalg = true
    }
  }
}
</script>
<style lang='scss'  scoped>
.orders-com{
  .orders-top{
    display: flex;
    .ordersInput{
       display: flex;
        margin-right: 20px;
       span{
        width: 100px;
        text-align: center;
        margin-right: 10px;
       }
    }
    .ordersDate{
        margin-right: 20px;
    }
  }
  .orders-main{
    margin-top: 30px;
  }
}
</style>
<style lang='scss'  >
.orders-com{
 .orders-main{
  width: 100%;
  .el-table td, .el-table th.is-leaf{
    border-bottom: 0px solid #EBEEF5;
  }
}
}

</style>
